<template>
  <div class="container">
    <div class="header">一次排出集计</div>
    <div class="echart-container">
      <div class="table-box">
        <div class="t-body" ref="tBody">
          <div class="t-row">
            <div
              v-for="(col, idx) in tableData.title"
              :key="idx"
              class="t-column"
              v-html="col"
              style="line-height: 1.4; padding: 3px"
            ></div>
          </div>
          <div v-for="(row, index) in tableData.dataList" :key="index" class="t-row">
            <div v-for="(col, idx) in row" :key="idx" class="t-column">{{ col }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="title-list">
      <div class="title-item">个数及百分比显示</div>
    </div>
    <div class="tips">
      <div ref="echartsBox" class="echarts-box"></div>
    </div>
  </div>
</template>

<script>
  import commomOption from './commomOption.js';
  import * as echarts from 'echarts';
  export default {
    props: {
      data: {
        default: () => {
          return {
            title: [],
            dataList: [],
          };
        },
        typeof: Object,
      },
    },
    data() {
      return {
        myChart: null,
        tableData: {
          title: ['', '群底<br>胶带', '引线<br>切断', '封口板<br>放置', '引线<br>焊接', '强度<br>检测', '引线<br>折曲'],
          dataList: [
            ['9:00', 1, '', 1, 2, '', ''],
            ['9:00', 1, '', 1, '', '', ''],
            ['9:00', 1, '', '', 2, '', '2'],
            ['9:00', 1, '', 1, 2, '', ''],
            ['9:00', 1, '', 1, 2, '', ''],
            ['9:00', 1, '', 1, 2, '', ''],
            ['9:00', 1, '', 1, 2, '', ''],
          ],
          status: [
            [
              { name: '数据1', value: 5.6 },
              { name: '数据2', value: 1 },
              { name: '数据3', value: 0.8 },
              { name: '数据4', value: 0.5 },
              { name: '数据5', value: 0.5 },
              { name: '其它', value: 3.8 },
            ],
            [
              { name: '数据1', value: 3.8 },
              { name: '数据2', value: 2.3 },
              { name: '数据3', value: 2.2 },
              { name: '数据4', value: 1.3 },
              { name: '数据5', value: 1.2 },
              { name: '其它', value: 5.7 },
            ],
          ],
        },
      };
    },
    watch: {
      data: {
        handler() {
          this.tableData.title = this.data.title;
          this.tableData.dataList = this.data.dataList;
          this.tableData.status = this.data.status;
          this.tableData.nowdate = this.data.nowdate;
          const colors = [
            '#24dcf7',
            '#ffdb15',
            '#2B7CB5',
            '#FF6271',
            '#22B2CB',
            '#10e8aa',
            'rgb(233,156,187)',
            'rgb(241,213,100)',
            'rgb(116,216,243)',
            'rgb(55,182,255)',
          ];

          this.tableData.status.map(item => {
            item.map((item, idx) => {
              item.label = {
                formatter: '{name|{c}}\n{time|{b}}',
                //alignTo: 'edge',
                minMargin: 5,
                edgeDistance: 5,
                lineHeight: 15,
                rich: {
                  name: {
                    fontSize: 13,
                    lineHeight: '20',
                    color: colors[idx],
                  },
                  time: {
                    fontSize: 13,
                    color: '#eee',
                  },
                },
              };
            });
          });
          const option = {
            title: [
              {
                text: this.tableData.nowdate,
                left: '18%', //居中显示
                top: '90%', //底部显示
                textStyle: {
                  color: '#cccccc',
                  fontSize: 18,
                },
              },
              {
                text: '周别累计',
                left: '65%', //居中显示
                top: '90%', //底部显示
                textStyle: {
                  color: '#cccccc',
                  fontSize: 18,
                },
              },
            ],
            color: colors,
            series: this.tableData.status.map(function (item, idx) {
              var left = idx * 50;
              return {
                name: '周',
                type: 'pie',
                radius: [40, 60],
                top: -25,
                left: left + '%',
                width: '50%',
                itemStyle: {
                  borderColor: '#082d58',
                  borderWidth: 2,
                  borderRadius: 4,
                },
                labelLine: {
                  length: 15,
                  length2: 0,
                  maxSurfaceAngle: 80,
                  normal: {
                    show: false,
                  },
                },
                label: {
                  normal: {
                    fontSize: 18,
                    color: 'rgb(255,255,255)',
                  },
                },
                // labelLayout: function (params) {
                //   const isLeft = params.labelRect.x < myChart.getWidth() / 2;
                //   const points = params.labelLinePoints;
                //   // Update the end point.
                //   points[2][0] = isLeft ? params.labelRect.x : params.labelRect.x + params.labelRect.width;
                //   return {
                //     labelLinePoints: points,
                //   };
                // },
                data: item,
              };
            }),
          };
          this.echartInit(option);
        },
        immediate: true,
      },
    },
    created() {},
    methods: {
      // echarts初始化
      echartInit(option) {
        if (this.myChart) {
          this.myChart.setOption(option);
          return false;
        }

        this.$nextTick(() => {
          this.myChart = echarts.init(this.$refs.echartsBox);

          option && this.myChart.setOption(option);
          // 根据页面大小自动响应图表大小
          window.addEventListener('resize', () => {
            this.myChart.resize();
          });
        });
      },
    },
  };
</script>
<style lang="scss" scoped>
  @import url(./container.scss);
  .container {
    position: relative;
    flex: auto;
    //background: url(../image/quality/rbg.png) 0px 0px no-repeat;
    background-size: 100% 100%;
    .echart-container {
      height: 500px !important;
      padding: 10px 10px 0px;
    }
    .header {
      font-size: 20px;
      font-family: 'Microsoft YaHei';
      color: rgb(255, 255, 255);
      font-weight: bold;
      text-shadow: 0px 0px 10px rgba(5, 28, 67, 0.004);
      margin-top: 20px;
      padding-bottom: 5px;
      padding-left: 15%;
      background: url(../image/block_title.png) 0px 0px no-repeat;
      background-size: 100% 100%;
    }
    .table-box {
      flex: 1;
      display: flex;
      min-height: 400px;
      flex-direction: column;

      .t-header {
        background: url(../image/table-header.png) 0px 0px no-repeat;
        background-size: 100% 100%;
        min-height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: -1px;
        z-index: 10;

        .header-text {
          font-size: 20px;
          font-weight: bold;
          color: #ffffff;
          background: linear-gradient(0deg, #ffffff 0%, #98deff 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }

      .t-body {
        flex: 1;
        border: 1px solid #2b7cb5;

        .tip-text {
          padding: 8px;
          font-size: 12px;
          color: #ffffff;
          line-height: 1.8;
        }
      }

      .t-row {
        display: flex;
        text-align: center;
        color: #ffffff;
        min-height: 32px;
        line-height: 32px;
        border-bottom: 1px solid rgba(43, 124, 181, 0.5);

        &:nth-child(even) {
          background: rgba(12, 112, 189, 0.2);
        }
      }

      .t-column {
        color: white;
        flex: 1;
        padding: 0px 3px;
        border-right: 1px solid rgba(43, 124, 181, 0.4);

        &:nth-last-child(1) {
          border-right: none;
        }
      }
    }
    .title-list {
      display: flex;
      justify-content: space-between;
      padding: 0px 60px;
      .title-item {
        width: 100%;
        min-width: 29%;
        height: 54px;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 2px solid #a1c8fa;
        background-size: 100% 100%;
        font-size: 24px;
        color: white;
        box-sizing: border-box;
        padding-bottom: 4px;
      }
    }
    .tips {
      padding: 2px;
      display: flex;
      flex: auto;
      flex-wrap: wrap;
      .echarts-box {
        width: 100%;
      }
    }
  }
</style>
